<template>
  <div class="app_explain">
    <affix :label="$t('configLazyLoad.channel.wexinAPPTip1')">
      <p>{{$t('configLazyLoad.channel.wexinAPPTip2')}}</p>
      <div class="img_wrap img_wrap2">
        <img src="../../../../../assets/img/weixin_app_access.png" alt="">
      </div>
    </affix>
  </div>
</template>
<script>
  import Affix from '@/components/ui-modules/affix/Affix'
  export default {
    name: 'AppExplain',
    data () {
      return {
        webchatUrl: ''
      }
    },
    components: {
      Affix
    },
    computed: {},
    methods: {},
    beforeMount () {
      this.$store.dispatch('queryWebchat', {}).then((resp) => {
        console.log(resp)
        if (resp.success) {
          this.webchatUrl = resp.webchatUrl
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .app_explain
    padding 20px 15px
    height: calc(100vh - 52px - 42px - 20px - 60px)
    overflow: auto
    p
      color #7d7b7b
    .img_wrap
      margin-top 20px
      position relative
      width 800px
      margin 30px auto
      .url0
        position: absolute
        background: #fff
        color: #666
        left: 459px
        top: 28px
        padding: 0 5px
      img
        width: 100%
  .box-wrap
    position relative
    width 100%
    margin-bottom  60px
    .img-url
      position absolute
      font-size 12px
      color #666
    .img_wrap2
      margin 0 auto
    .img-list
      display flex
      justify-content space-between
      padding 40px 20px 0
      margin-bottom 20px
      font-size 14px
      list-style none
      color $c-main
      li
        position relative
        padding 1px 0
        border-bottom 1px solid $c-main
        cursor pointer
        div
          display none
          position absolute
          z-index 111
        .img1
          width 446px
          height 380px
          top -380px
          background url(../../../../../assets/img/weChatProAuthorize2.jpg) no-repeat center center/cover
          .url1
            top 90px
            left 35px
          .url1-1
            top 274px
            left 95px
        .img2
          width 580px
          height 327px
          top -327px
          left -210px
          background url(../../../../../assets/img/weChatProAuthorize3.jpg) no-repeat center center/cover
          .url2
            top 191px
            left 120px
        .img3
          width 829px
          height 382px
          top -382px
          right 0
          background url(../../../../../assets/img/weChatProAuthorize4.jpg) no-repeat center center/cover
          .url3
            top 317px
            left 98px
            width 652px
            color $c-main
            transform scale(.8)
        &:hover
         div
           display block
</style>




















